import { message } from 'antd';

import CopyableIcon from './CopyableIcon';
import { FC, ReactNode, useEffect, useRef, useState } from 'react';

export interface IconItem {
  name: string;
  value: string;
}

export interface CategoryProps {
  icons: IconItem[];
  title: ReactNode;
}

const Category: FC<CategoryProps> = ({ title, icons }) => {
  const [justCopied, setJustCopied] = useState<string | null>(null);

  const timer = useRef<NodeJS.Timeout>();

  const handleCopied = (name: string, text: string) => {
    message.success(
      <span>
        <code className="copied-code">{text}</code> copied 🎉
      </span>,
    );

    setJustCopied(name);

    timer.current = setTimeout(() => {
      setJustCopied(null);
    }, 500);
  };

  useEffect(() => {
    return () => {
      if (timer.current) {
        clearTimeout(timer.current);
      }
    };
  }, []);

  return (
    <div>
      <h3>{title}</h3>
      <ul className="icons-list">
        {icons.map(({ name, value }) => {
          return (
            <CopyableIcon
              key={value}
              name={name}
              code={value}
              justCopied={justCopied}
              onCopied={handleCopied}
            />
          );
        })}
      </ul>
    </div>
  );
};

export default Category;
